<template>
   <div>
      <!-- 面包屑导航区 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item :to="{ path: '/Cate' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item>商品管理</el-breadcrumb-item>
         <el-breadcrumb-item>商品分类</el-breadcrumb-item>
      </el-breadcrumb>
      <!--     卡片视图区-->
      <el-card>
         <el-row>
            <el-col>
               <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
            </el-col>
         </el-row>
         <!--表格区-->
         <tree-table class="treeTable" :data="catelist" :columns="columns" :selection-type="false" :expand-type="false"
                     :show-index="true" index-text="#" border>
              <!--是否有效模板-->
           <template slot="isok" slot-scope="scope">
              <i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color:green"></i>
              <i class="el-icon-error" v-else style="color: red"></i>
           </template>
             <!-排序模板-->
            <template slot="order" slot-scope="scope">
             <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
             <el-tag type="success" size="mini" v-else-if="scope.row.cat_level === 1">二级</el-tag>
             <el-tag type="danger" size="mini" v-else>三级</el-tag>
            </template>
            <!--操作-->
            <template slot="opt" slot-scope="scope" >
               <el-button type="primary" icon="el-icon-edit"  size="mini">编辑</el-button>
               <el-button type="danger" icon="el-icon-delete"  size="mini">删除</el-button>
            </template>
         </tree-table>
         <!--页区-->
         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="querInfo.pagenum"
            :page-sizes="[3, 5, 10, 15]"
            :page-size="querInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
         </el-pagination>
      </el-card>
   <!--  添加分类的对话框-->
      <el-dialog
         title="添加分类"
         :visible.sync="addCateDialogVisible"
         width="50%" @close="addCateDialogClosed">
            <!--添加分类的表单（带验证规则的表单）-->
         <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px" >
            <el-form-item label="分类名称：" prop="cat_name">
               <el-input v-model="addCateForm.cat_name"></el-input>
            </el-form-item>
            <el-form-item label="父级分类：">
               <!--级联选择器-->
               <!--options 数据源 -->
               <!--props 用来制定数据配置对象 -->
               <el-cascader
                  expandTrigger= 'hover'
                  v-model="selectedKeys"
                  :options="parentCateList"
                  :props="cascaderProps "
                  @change="parentCateChanged" clearable change-on-select>

               </el-cascader>
           <!--<el-input v-model="addCateForm.cate_name"></el-input>-->
            </el-form-item>
         </el-form>
         <span slot="footer" class="dialog-footer">
    <el-button @click="addCateDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCate">确 定</el-button>
  </span>
      </el-dialog>
   </div>
</template>
<script>
export default {
   data() {
      return {
         // 查询条件
         querInfo: {
            type: 3,
            pagenum: 1,
            pagesize: 5
         },
         catelist: [],  //商品分类的数据列表，默认为空
         total: 0,  //总数据条数
         //为table制定列的定义
         columns: [
            {
               label: '分类名称',
               prop: 'cat_name'
            },{
            label: '是否有效',
            type:'template' ,  //表示当前列定位模板列
            template:'isok'   //使用的模板列名称-去表格哪里插入就可以
            },{
               label: '排序',
               type:'template' ,  //表示当前列定位模板列
               template:'order'   //使用的模板列名称-去表格哪里插入就可以
            },{
               label: '操作',
               type:'template' ,  //表示当前列定位模板列
               template:'opt'   //使用的模板列名称-去表格哪里插入就可以
            }
         ],
         // 控制添加分类的对话框的显示隐藏
         addCateDialogVisible : false,
         // 添加分类的表单数据对象
         addCateForm:{
            cate_name:'',  //将要添加的分类名称
            cat_pid:0,     //父级分类的id
            cat_level:0,   //添加的分类登记，默认为一级
         },
         // 添加分类表单的验证规则
         addCateFormRules:{
            cat_name:[{ required: true, message: '请输入分类名称', trigger: 'blur' }
            ]
         },
         // 父级分类的列表
         parentCateList:[],
         // 制定级联选择器配置对象
         cascaderProps:{
           value:'cat_id',
           label:'cat_name',
           children:'children'
         },
         selectedKeys:[],  //选中的父级分类的id数组

      }
   },
   created() {
      this.getCatList()
   },
   methods: {
      // 获取商品分类数据-返回promise对象，可以优化async await 异步
      async getCatList() {
         const {data: res} = await this.$http.get('categories', {params: this.querInfo})
         // console.log(res)
         if (res.meta.status !== 200) {
            return this.$message.error('获取商品分类失败！')
         }
         this.catelist = res.data.result
         this.total = res.data.total  // 存储总数据条数
      },
      // 箭头pagesize分页的监听改变
      handleSizeChange(newSize){
         this.querInfo.pagesize = newSize
         this.getCatList()
      },
      // 监听pagenum的改变
      handleCurrentChange(newPage){
         this.querInfo.pagenum = newPage
         this.getCatList()
      },
      // 点击添加分类的按钮的对话框
      showAddCateDialog(){
         this.getParentCateList() //先获取父级分类的数据列表
         // 再展示 对话框
         this.addCateDialogVisible=true
      },
      // 获取父级分类的数据列表
      async getParentCateList(){
       const {data : res } = await this.$http.get('categories',{params:{type:2,}})
        if (res.meta.status !== 200){
           return this.$message.error('获取父级分类失败！')
        }
        this.parentCateList = res.data
        console.log(res.data)
      },
      // 级联选择器呗选中的监听变化出发的函数
      parentCateChanged(){
         console.log(this.selectedKeys)
         // 如果selectedKeys中的length大于0，那么说明选中了父级
         // 否则没有选中任何选项--做个判断
         if (this.selectedKeys.length > 0){
            // 父级分类的id--最后一项id为父级id
          this.addCateForm.cat_pid =  this.selectedKeys[this.selectedKeys.length -1 ]
            // 为当前分类的登记赋值
          this.addCateForm.cat_level = this.selectedKeys.length
         }else {
            this.addCateForm.cat_pid = 0
            this.addCateForm.cat_level = 0
         }
      },
      // 点击按钮添加新的分类
       addCate(){
         this.$refs.addCateFormRef.validate(async valid =>{
            if(!valid) return
         const {data:res } =  await this.$http.post('categories',this.addCateForm)
            if (res.meta.status !== 201 ){
               return this.$message.error('添加分类失败')
            }
            this.$message.success('添加分类成功！')
            this.getCatList()
            this.addCateDialogVisible = false
         })
      },
      // 监听添加分类的对话框关闭事件  关闭的时候cat_pid，cat_level还有数组selectedKeys清空
      addCateDialogClosed(){
       this.$refs.addCateFormRef.resetFields()
         this.selectedKeys =[]
         this.addCateForm.cat_pid = 0
         this.addCateForm.cat_level = 0
      }
   },

}
</script>
<style lang="less" scoped>
.treeTable{
   margin-top: 15px;
}
.el-cascader{
   width: 100%;
}

</style>



